<template>
  <div class="app-container" :style="{ }">
    <div class="input-item">
      <el-input placeholder="请输入门店地址" size="mini" id="tipinput" v-model="address">
        <template slot="prepend">请输入关键字</template>
      </el-input>
    </div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: 'SearchPoi',
  props: {
    storeName: '',
    storePosition:''
  },
  data() {
    return {
      //实时屏幕高度
      windowHeight: document.documentElement.clientHeight,
      map: null,
      address: '',
      message: '请用鼠标在地图上操作试试',
      //把选中的经纬度回传给父组件
      position:null
    }
  },
  created() {
  },
  mounted() {
    // 当浏览器被重置大小时执行
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight
      })()
    }
    //销毁地图
    //调用地图初始化方法
    this.initAMap()
    this.updateMap()
  },
  methods: {
    initAMap() {
      //地图加载
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 16,
        zooms: [4, 22],
        center:this.position
      })
      //绑定点击事件
      this.map.on('click', this.showInfoClick);
      //输入提示
      let autoOptions = {
        input: 'tipinput'
      }
      console.log('tip', autoOptions)
      let auto = new AMap.AutoComplete(autoOptions)
      let placeSearch = new AMap.PlaceSearch({
        map: this.map
      })  //构造地点查询类
      auto.on('select', select)//注册监听，当选中某条记录时会触发
      let marker = new AMap.Marker({
        position: [this.storePosition.split(",")[0] , this.storePosition.split(",")[1]],
        map:this.map
      });
      function select(e) {
        console.log('监听到了！', autoOptions)
        placeSearch.setCity(e.poi.adcode)
        placeSearch.search(e.poi.name)  //关键字查询查询
      }
    },
    showInfoClick(e) {
      this.map.clearMap();
      this.message = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！'
      console.log( e.lnglat.getLng() ,e.lnglat.getLat())
      const marker = new AMap.Marker({
        position: [e.lnglat.getLng() , e.lnglat.getLat()],
        map:this.map
      });
      const positon=e.lnglat.getLng() + ',' + e.lnglat.getLat()
      this.pushPosition(positon)
    },
    pushPosition(position){
      this.$emit("getPosition",position)
    },
    getStandardPosition(position){
      const newPosition=[]
      newPosition.push(position.split(",")[0])
      newPosition.push(position.split(",")[1])
      console.log("转化地图坐标",newPosition)
      this.position=newPosition
    },
    updateMap(){
      console.log("进来更新地图了",this.storePosition)
      if(this.storePosition!=null){
        console.log("进来更新地图坐标",this.storePosition)
        this.map.clearMap();
        this.getStandardPosition(this.storePosition)
        console.log("进来转化更新地图坐标",this.storePosition)
        const marker = new AMap.Marker({
          position: this.position,
          map:this.map
        });
        this.map.setCenter(this.position)
      }
    },
    destroyMap(){
      this.map.destroy( );
    }
  }
}
</script>

<style scoped>
#app-container {
  width: 100%;
  position: relative;
}

#container {
  width: 100%;
  height: 400px;
}

.input-item {
  position: absolute;
  background: white;
  padding: 0 0;
  right: 30px;
  top: 30px;
  z-index:9000
}
</style>
